<div *ngIf="workerModel;then showWorkerModel;else loadWorkerModel"></div>
<ng-template #showWorkerModel>
    <form class="ui form">
        <div class="ui grid">
            <div class="sixteen wide column">
                <div *ngIf="workerModel.editable && groups && groups.length === 0" class="ui orange message">
                    {{'common_help_no_group' | translate}}
                </div>

                <div class="field">
                    <div class="two ui buttons">
                        <button class="ui button" type="button" [class.active]="!asCode" [class.blue]="!asCode"
                            [class.disabled]="" (click)="asCode = false">
                            {{'common_edit_ui' | translate}}
                        </button>
                        <button class="ui button" type="button" [class.active]="asCode" [class.blue]="asCode"
                            (click)="loadAsCode()">
                            {{'common_edit_as_code' | translate}}
                        </button>
                    </div>
                </div>

                <ng-container *ngIf="!asCode">
                    <div class="four fields">
                        <div class="field">
                            <label>{{'common_name' | translate}} *</label>
                            <input class="ui input" type="text" name="name" [(ngModel)]="workerModel.name"
                                [readonly]="!workerModel.editable">
                        </div>
                        <div class="field">
                            <label>{{'common_group' | translate}} *</label>
                            <sm-select class="fluid search" name="group" *ngIf="groups && workerModel.editable"
                                [disabled]="loading" [(model)]="workerModel.group_id"
                                [options]="{'fullTextSearch': true}">
                                <option *ngFor="let group of groups" [value]="group.id">{{group.name}}</option>
                            </sm-select>
                            <input *ngIf="!workerModel.editable" class="ui input" type="text" name="group"
                                [ngModel]="workerModel.group?.name" [readonly]="true">
                        </div>
                        <div class="field">
                            <label>{{ 'worker_model_restricted' | translate }}</label>
                            <div class="ui checkbox">
                                <input type="checkbox" id="restricted" name="restricted"
                                    [(ngModel)]="workerModel.restricted" [disabled]="!workerModel.editable">
                                <label for="restricted">{{'worker_model_restricted_help' | translate}} <a
                                        target="_blank"
                                        href="https://ovh.github.io/cds/docs/concepts/worker-model/#what-s-a-restricted-worker-model">{{'common_see_documentation'
                    | translate}}</a></label>
                            </div>
                        </div>
                        <div class="field">
                            <label>{{ 'worker_model_is_deprecated' | translate }}</label>
                            <div class="ui checkbox">
                                <input type="checkbox" id="deprecated" name="deprecated"
                                    [(ngModel)]="workerModel.is_deprecated" [disabled]="!workerModel.editable">
                                <label for="deprecated">{{'worker_model_deprecated_help' | translate}}</label>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <label>{{'common_description' | translate}}</label>
                        <textarea name="description" [(ngModel)]="workerModel.description"
                            (ngModelChange)="descriptionChange()" [rows]="descriptionRows"
                            [readonly]="!workerModel.editable"></textarea>
                    </div>
                    <div class="two fields">
                        <div class="field">
                            <label>{{'worker_model_os' | translate}}</label>
                            <input class="ui input" type="text" name="os" [(ngModel)]="workerModel.registered_os"
                                [disabled]="true">
                        </div>
                        <div class="field">
                            <label>{{'worker_model_arch' | translate}}</label>
                            <input class="ui input" type="text" name="arch" [(ngModel)]="workerModel.registered_arch"
                                [disabled]="true">
                        </div>
                    </div>
                    <div class="field" *ngIf="workerModel.id">
                        <label>{{'worker_model_status' | translate}}</label>
                        <div class="ui icon message" *ngIf="!workerModel.disabled">
                            <i class="check green icon"></i>
                            <div class="content">
                                <p>{{ 'worker_model_enabled' | translate }}</p>
                            </div>
                            <button *ngIf="workerModel.editable" class="ui right floated button"
                                (click)="workerModel.disabled=true;clickSave()">{{
                'worker_model_disable' | translate }}</button>
                        </div>

                        <div class="ui icon message" *ngIf="workerModel.disabled">
                            <i class="warning red icon"></i>
                            <div class="content">
                                <p>{{ 'worker_model_disabled' | translate }}</p>
                            </div>
                            <button *ngIf="workerModel.editable" class="ui right floated button"
                                (click)="workerModel.disabled=false;clickSave()">{{
                'worker_model_enable' | translate }}</button>
                        </div>
                        <div class="ui icon message" *ngIf="workerModel.nb_spawn_err > 0">
                            <i class="exclamation triangle icon large red"></i>
                            <div class="content">
                                <h3>{{ 'worker_model_error' | translate }}</h3>
                                <p>{{workerModel.last_spawn_err}}</p>
                                <div>
                                    <h4>{{'worker_model_help_error' | translate}}</h4>
                                    <div class="ui list">
                                        <div class="item" *ngIf="workerModel.type === 'docker'">{{'worker_model_help_error_docker_1' |
                      translate}}</div>
                                        <div class="item" *ngIf="workerModel.type === 'docker'">{{'worker_model_help_error_docker_2' |
                      translate}}</div>
                                        <div class="item" *ngIf="workerModel.type === 'host'">{{'worker_model_help_error_host_1' |
                      translate}}</div>
                                        <div class="item" *ngIf="workerModel.type === 'host'">{{'worker_model_help_error_host_2' |
                      translate}}</div>
                                        <div class="item" *ngIf="workerModel.type === 'openstack'">{{'worker_model_help_error_openstack_1'
                      | translate}}</div>
                                        <div class="item" *ngIf="workerModel.type === 'openstack'">{{'worker_model_help_error_openstack_2'
                      | translate}}</div>
                                    </div>
                                </div>
                                <h4 *ngIf="workerModel.last_spawn_err_log">{{ 'worker_model_error_log' | translate }}
                                </h4>
                                <div class="logs" *ngIf="workerModel.last_spawn_err_log">
                                    <pre>{{workerModel.last_spawn_err_log}}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="three fields">
                        <div class="seven wide field">
                            <label>{{'worker_model_type' | translate}} *</label>
                            <sm-select class="fluid search" name="type" *ngIf="types && workerModel.editable"
                                [disabled]="loading" [(model)]="workerModel.type" [options]="{'fullTextSearch': true}"
                                (onChange)="typeChange($event)">
                                <option *ngFor="let type of types" [value]="type">{{type}}</option>
                            </sm-select>
                            <input *ngIf="!workerModel.editable" class="ui input" type="text" name="type"
                                [ngModel]="workerModel.type" [readonly]="true">
                        </div>
                        <div class="five wide field">
                            <label>{{'worker_model_communication' | translate}} *</label>
                            <sm-select class="fluid search" name="communication"
                                *ngIf="communications && workerModel.editable" [disabled]="loading"
                                [(model)]="workerModel.communication" [options]="{'fullTextSearch': true}">
                                <option *ngFor="let communication of communications" [value]="communication">
                                    {{communication}}</option>
                            </sm-select>
                            <input *ngIf="!workerModel.editable" class="ui input" type="text" name="communication"
                                [ngModel]="workerModel.communication" [readonly]="true">
                        </div>
                        <div class="four wide field">
                            <label>{{'worker_model_provision' | translate}}</label>
                            <input class="ui input" type="number" name="provision" [(ngModel)]="workerModel.provision"
                                [disabled]="!(currentUser.admin || workerModel.restricted)"
                                [readonly]="!workerModel.editable">
                        </div>
                    </div>
                    <ng-container *ngIf="workerModel.type === 'docker'">
                        <div class="two fields">
                            <div class="fifteen wide field">
                                <label>{{'worker_model_image' | translate}} *</label>
                                <input class="ui input" type="text" name="image"
                                    [(ngModel)]="workerModel.model_docker.image" [readonly]="!workerModel.editable">
                            </div>
                            <div class="one wide field">
                                <label suiPopup [popupText]="'worker_model_private_tooltip' | translate"
                                    popupPlacement="top left">
                                    Private Registry <i _ngcontent-c5="" class="fa fa-question-circle"></i>
                                </label>
                                <sui-checkbox name="private" [(ngModel)]="workerModel.model_docker.private"
                                    [isDisabled]="!workerModel.editable" [isReadonly]="!workerModel.editable">
                                </sui-checkbox>
                            </div>
                        </div>
                        <ng-container *ngIf="workerModel.model_docker.private">
                            <div class="field">
                                <label>Registry URL</label>
                                <input class="ui input" type="text" name="registry_url"
                                    placeholder="https://index.docker.io/v1/"
                                    [(ngModel)]="workerModel.model_docker.registry"
                                    [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                            </div>
                            <div class="field">
                                <label>{{'worker_model_username' | translate}}</label>
                                <input class="ui input" type="text" name="registry_username"
                                    [(ngModel)]="workerModel.model_docker.username"
                                    [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                            </div>
                            <div class="field">
                                <label>{{'worker_model_password' | translate}}</label>
                                <input class="ui input" type="password" name="registry_password"
                                    [(ngModel)]="workerModel.model_docker.password"
                                    [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                            </div>
                        </ng-container>
                        <div class="field" *ngIf="workerModel.editable">
                            <label>{{'worker_model_pattern_title' | translate}}</label>
                            <sui-select class="selection" name="pattern" placeholder="{{'common_select' | translate}}"
                                [options]="patternsFiltered" isSearchable="true" [(ngModel)]="patternSelected"
                                (selectedOptionChange)="patternChange()" [optionFormatter]="formatPattern()"
                                #selectPattern>
                                <sui-select-option *ngFor="let option of selectPattern.filteredOptions"
                                    [value]="option">
                                </sui-select-option>
                            </sui-select>
                        </div>
                        <div class="field">
                            <label>{{'worker_model_shell_docker' | translate}} *</label>
                            <input class="ui input" type="text" name="shell" placeholder="sh -c"
                                [(ngModel)]="workerModel.model_docker.shell"
                                [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                        </div>
                        <div class="field">
                            <label suiPopup [popupText]="'worker_model_cmd_tooltip' | translate"
                                popupPlacement="top left">
                                {{'worker_model_cmd_docker' | translate}} * <i _ngcontent-c5=""
                                    class="fa fa-question-circle"></i>
                            </label>
                            <input class="ui input" type="text" name="cmd" [(ngModel)]="workerModel.model_docker.cmd"
                                [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                        </div>
                        <div class="field">
                            <label suiPopup [popupText]="'worker_model_env_tooltip' | translate"
                                popupPlacement="top left">
                                {{'worker_model_env' | translate}} <i _ngcontent-c5=""
                                    class="fa fa-question-circle"></i>
                            </label>
                            <ng-container *ngIf="workerModel.model_docker.envs">
                                <div class="two fields" *ngFor="let envName of envNames; let index = index">
                                    <div class="field">
                                        <input type="text" name="name-{{envName}}"
                                            [placeholder]="'common_name' | translate" [value]="envName" disabled>
                                    </div>
                                    <div class="field">
                                        <input type="text" name="value-{{envName}}"
                                            [placeholder]="'common_value' | translate"
                                            [(ngModel)]="workerModel.model_docker.envs[envName]"
                                            [disabled]="!workerModel.editable">
                                    </div>
                                    <button class="ui icon red button" (click)="deleteEnv(envName, index)"
                                        *ngIf="workerModel.editable">
                                        <i class="trash icon"></i>
                                    </button>
                                </div>
                            </ng-container>
                            <div class="two fields" *ngIf="workerModel.editable">
                                <div class="field">
                                    <input type="text" name="newEnvName" [placeholder]="'common_name' | translate"
                                        [(ngModel)]="newEnvName">
                                </div>
                                <div class="field">
                                    <input type="text" name="newEnvValue" [placeholder]="'common_value' | translate"
                                        [(ngModel)]="newEnvValue">
                                </div>
                                <button class="ui icon green button" (click)="addEnv(newEnvName, newEnvValue)">
                                    <i class="plus icon"></i>
                                </button>
                            </div>
                        </div>
                    </ng-container>
                    <ng-container *ngIf="workerModel.type && workerModel.type !== 'docker'">
                        <div class="field">
                            <label>{{'worker_model_image' | translate}} *</label>
                            <input class="ui input" type="text" name="image"
                                [(ngModel)]="workerModel.model_virtual_machine.image"
                                [readonly]="!workerModel.editable">
                        </div>
                        <div class="field" *ngIf="workerModel.type === 'openstack'">
                            <label>Flavor</label>
                            <input class="ui input" type="text" name="flavor"
                                [(ngModel)]="workerModel.model_virtual_machine.flavor"
                                [readonly]="!workerModel.editable">
                        </div>
                        <div class="field">
                            <label>{{'worker_model_pattern_title' | translate}}</label>
                            <sui-select class="selection" name="pattern" placeholder="{{'common_select' | translate}}"
                                [options]="patternsFiltered" isSearchable="true" [(ngModel)]="patternSelected"
                                (selectedOptionChange)="patternChange()" [optionFormatter]="formatPattern()"
                                #selectPattern>
                                <sui-select-option *ngFor="let option of selectPattern.filteredOptions"
                                    [value]="option">
                                </sui-select-option>
                            </sui-select>
                        </div>
                        <div class="field">
                            <label>{{'worker_model_pre_cmd' | translate}}</label>
                            <textarea class="ui input" name="pre_cmd"
                                [(ngModel)]="workerModel.model_virtual_machine.pre_cmd"
                                [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                            </textarea>
                        </div>
                        <div class="field">
                            <label suiPopup [popupText]="'worker_model_cmd_tooltip' | translate"
                                popupPlacement="top left">
                                {{'worker_model_cmd' | translate}} * <i _ngcontent-c5=""
                                    class="fa fa-question-circle"></i>
                            </label>
                            <input class="ui input" type="text" name="cmd"
                                [(ngModel)]="workerModel.model_virtual_machine.cmd"
                                [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                        </div>
                        <div class="field">
                            <label>{{'worker_model_post_cmd' | translate}}</label>
                            <textarea class="ui input" name="post_cmd"
                                [(ngModel)]="workerModel.model_virtual_machine.post_cmd"
                                [disabled]="loading || (!currentUser.admin && !workerModel.restricted)">
                            </textarea>
                        </div>
                    </ng-container>
                    <div *ngIf="workerModel.editable" class="field">
                        <app-delete-button *ngIf="workerModel.id" class="left floated" (event)="clickDelete()"
                            [loading]="deleteLoading"></app-delete-button>
                        <button class="ui green right floated button" [class.loading]="loading" (click)="clickSave()">
                            <i class="save icon"></i>{{ 'btn_save' | translate }}
                        </button>
                    </div>
                </ng-container>

                <ng-container *ngIf="asCode">
                    <div class="field">
                        <ng-container *ngIf="!loadingAsCode">
                            <codemirror [(ngModel)]="workerModelAsCode" [config]="codeMirrorConfig"
                                name="asCodeCodeMirror" #codeMirror>
                            </codemirror>
                        </ng-container>
                        <div class="ui active centered inline loader" *ngIf="loadingAsCode"></div>
                    </div>
                    <div *ngIf="workerModel.editable" class="field">
                        <app-delete-button *ngIf="workerModel.id" class="left floated" (event)="clickDelete()"
                            [loading]="deleteLoading"></app-delete-button>
                        <button class="ui green right floated button" [class.loading]="loading"
                            (click)="clickSaveAsCode()" [class.disabled]="!workerModel.editable">
                            <i class="save icon"></i>{{ 'btn_save' | translate }}
                        </button>
                    </div>
                </ng-container>
            </div>
        </div>
    </form>
</ng-template>
<ng-template #loadWorkerModel>
    <div class="ui text active loader">{{ 'common_loading' | translate }}</div>
</ng-template>
